/*
3x3数字华容道，一共有9个格子，我们可以为每一个格子标记下标，通过下标来找到对应的div元素对象
格子下标从0开始，每个格子的下标如下所示：
0,  1,  2,
3,  4,  5,
6,  7,  8,
*/
window.onload = function () {
    /*
     定义数字数组numArray，值为1~9，该数组中的元素则为每个格子中显示的数字
     同时定义div元素节点对象的数组divObjArray，每一个数组元素均为div元素节点对象
     通过遍历方式，依次对每个数组元素赋值
     */
    var numArray = new Array(9);
    var divObjArray = new Array(9);
    for (var i = 0; i < divObjArray.length; i++) {
        numArray[i] = i + 1;
        divObjArray[i] = document.getElementById("index_" + i);
    }

    /*
     定义“开始游戏”按钮的元素节点对象startButton
          开始游戏按钮绑定单击响应函数，当玩家点击按钮后，更改按钮显示字样，更改按钮颜色；
          游戏顺利通关后，复位按钮；
     定义计时器timer
          定时器设置计时函数timing，
          当玩家点击开始按钮进入游戏后，定时器开始计时；
          游戏顺利通关后，复位计时器；
     定义计时器所示时间文本的元素节点对象timeText
          游戏快开始后，每秒显示当前所用时间；
          游戏结束后，时间文本复位置空
     定义提示文字“目标图案”的元素节点对象promptText
          当玩家进入游戏后，将该提示文字隐藏起来；
          游戏结束后，提示文字再显示
     */
    var startButton = document.getElementById("startButton");
    var timer;
    var curTime = 0;
    var timeText = document.getElementById("outputTime");
    var promptText = document.getElementById("promptText");

    startButton.onclick = function () {
        if (startButton.innerHTML == "游戏中...") {
            return;
        }

        // 更改按钮显示字样，更改按钮颜色
        startButton.innerHTML = "游戏中...";
        startButton.style.backgroundColor = "#FF7575";

        // 随机分布1~9数字所在位置
        numArray.sort(function () {
            return Math.random() > 0.5 ? -1 : 1;
        });

        //测试用
        numArray = [1, 2, 3, 4, 5, 6, 7, 9, 8];

        for (var i = 0; i < divObjArray.length; i++) {
            if (numArray[i] == 9) {
                divObjArray[i].innerHTML = "";
                divObjArray[i].style.backgroundColor = "#6C6C6C";
                continue;
            }
            divObjArray[i].innerHTML = numArray[i];
            divObjArray[i].style.backgroundColor = "#FFA042";
        }

        // 定时器开始计时
        setTimeout(timing, 1000);

        // 同步显示时间文本
        curTime = 0;
        timeText.value = curTime;

        // 将顶部的“目标图案”字样隐藏
        promptText.style.display = "none";

    }

    // 计时器
    function timing() {
        if (startButton.innerHTML == "游戏中...") {
            curTime++;
            timeText.value = curTime;
            timer = setTimeout(timing, 1000);
        }
    }

    /*
    使用9代表空白格，通过变量emptyIndex存储该值所在格子的下标
    并声明更新9空白格位置的函数updateEmptyFun
     */
    var emptyIndex = 8;

    // 获取空白格所在下标
    function updateEmptyFun() {
        emptyIndex = numArray.indexOf(9);
    }

    /*
    为每一个格子绑定单击响应函数
     
    将绑定单击响应函数公共部分抽取出来，作为公共函数updatePositionFun，减少冗余代码
        公共函数部分包含更新空白格子在数组numArray中的位置，同时更新格子交换后的颜色、数值
    
    在每次位置更新结束之后，需要判断是否已经完成数字排序；方法为isGameOver
        若当前空白格已经在最后一位，则判断前面的所有数字均按照升序排序
     */
    function updatePositionFun(divIndex) {
        if (startButton.innerHTML == "开始游戏") {
            return;
        }
        numArray[emptyIndex] = divObjArray[divIndex].innerHTML;
        numArray[divIndex] = 9;
        divObjArray[emptyIndex].innerHTML = divObjArray[divIndex].innerHTML;
        divObjArray[emptyIndex].style.backgroundColor = "#FFA042";
        divObjArray[divIndex].innerHTML = "";
        divObjArray[divIndex].style.backgroundColor = "#6C6C6C";
        console.log(numArray);
        //console.log();
        console.log(divIndex);
        if (divIndex == 8) {
            isGameOver();
        }
    }

    // 判断游戏是否通关
    function isGameOver() {
        for (var i = 0; i < numArray.length; i++) {
            if (numArray[i] != i + 1) {
                return;
            }
        }
        // 游戏通关，弹框告知玩家游戏顺利通关，以及所用时间
        alert("通关啦！ 用时：" + timeText.value + "s");
        // 将“开始游戏”按钮复位
        startButton.innerHTML = "开始游戏";
        startButton.style.backgroundColor = "#97CBFF";
        // 将计时器复位
        clearTimeout(timer);
        // 将顶部的“目标图案”字样设置为显示
        promptText.style.display = "block";
    }

    // 下标为0~8的格子的单击响应函数
    divObjArray[0].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 1 || emptyIndex == 3) {
            updatePositionFun(0);
        }
    }
    divObjArray[1].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 0 || emptyIndex == 2 || emptyIndex == 4) {
            updatePositionFun(1);
        }
    }
    divObjArray[2].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 1 || emptyIndex == 5) {
            updatePositionFun(2);
        }
    }
    divObjArray[3].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 0 || emptyIndex == 4 || emptyIndex == 6) {
            updatePositionFun(3);
        }
    }
    divObjArray[4].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 1 || emptyIndex == 3 || emptyIndex == 5 || emptyIndex == 7) {
            updatePositionFun(4);
        }
    }
    divObjArray[5].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 2 || emptyIndex == 4 || emptyIndex == 8) {
            updatePositionFun(5);
        }
    }
    divObjArray[6].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 3 || emptyIndex == 7) {
            updatePositionFun(6);
        }
    }
    divObjArray[7].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 4 || emptyIndex == 6 || emptyIndex == 8) {
            updatePositionFun(7);
        }
    }
    divObjArray[8].onclick = function () {
        updateEmptyFun();
        if (emptyIndex == 5 || emptyIndex == 7) {
            updatePositionFun(8);
        }
    }

    // 格子的单击响应函数
    function resFun() {
        var curIndex;

        divObjArray[i].onclick = function () {
            updateEmptyFun();
            curIndex = divObjArray.indexOf(this);
            console.log(curIndex);
            updatePositionFun(curIndex);
        }


    }
    resFun();

}